<template>
  <div style="background-color: #fff;padding: 10px">
      <div class="list">
        <a-list :grid="{ gutter: 0, column: 3}" :data-source="topItems" style="padding: 10px 0;">
          <template #renderItem="{ item }">
            <a-list-item>
              <div class="top-card" :style="{ backgroundImage: 'url('+item.bg+')'}">
                <div class="content">
                  <div class="img">
                    <a-image :src="item.pic" class="img" width="100px" />
                  </div>
                  <h3><router-link :to="'/pc/detail/' + item.index">{{ item.name }}</router-link></h3>
                  <a-space class="tag">
                    <label>标签1</label>
                    <label>标签2</label>
                    <label>标签3</label>
                  </a-space>
                  <br>
                  <a-space class="attr">
                    <label>{{ item.plats.join(' , ') }}</label>
                  </a-space>
                <div class="score">
                  <label># {{ item.index }}</label>
                  <span>{{ item.score }}</span>
                </div>
              </div>
              </div>
            </a-list-item>
          </template>
        </a-list>
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>片名</th>
              <th>收视率</th>
              <th>播放平台</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in otherItems" :key="'video_'+index">
              <td>{{ item.index }}</td>
              <td><router-link :to="'/pc/detail/' + item.index">{{ item.name }}</router-link></td>
              <td>{{ item.score }}</td>
              <td>{{ item.plats.join(', ') }}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>
</template>
<script>
import mockData from '@/mock/list.js'
export default {
  computed: {
    topItems() {
      return mockData.topItems
    },
    otherItems() {
      return mockData.otherItems
    }

  }

}
</script>
<style lang="less" scoped>
/* 样式可以根据你的需要自行添加 */
a {color: #166cff !important; font-weight: bolder};
.list {
  table {
    width: 100%;
    margin: 10px auto;
    border-collapse: collapse;
    th, td {
      border-bottom: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  }
}

.top-card {
  border-bottom: 1px solid var(--primaryColor);
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 -15px;
  text-align: left;
  .content {
    background-color: rgba(255,255,255,0.8);
    width: 100%;
    position: relative;
    height: 150px;
    padding: 10px 10px 10px 110px;
    .img {
      position: absolute !important;
      left:0;
      top: 0;
    }
    h3 {
      font-weight: bolder;
    }
    .tag,.attr {
      label {
        font-size: 13px;
        line-height: 25px;
        height: 25px;
      }
    }
    .score {
      font-size: 20px;
      position: absolute;
      bottom: 10px;
      right: 10px;
      left: 110px;
      font-weight: bold;
      label {
        color: red;
      }
      span {
        display: block;
        float: right;
      }
    }
  }
  /*
  background-image: url('https://www.themoviedb.org/t/p/w1920_and_h800_multi_faces/f5KVfnAjtzMv3IwFENLv5Vo14wM.jpg') ;
  */
}
</style>
